<template>
  <div>
    <nav-bar :title="title" class="nav_bar"/>
    <div class="content_scroll">
      <detail-header :gameinfo="gameinfo"/>
      <detail-discount :gameinfo="gameinfo"/>
      <detail-coupon :gameinfo="gameinfo"/>
      <detail-tabs 
        :gameinfo="gameinfo" 
        @used-click="usedClick" 
        :commentlist="commentlist"
        @review-activities="reviewActivities"/>
    </div>
    <detail-tab-bar 
      :gameinfo="gameinfo"
      :gameSignType="gameSignType"/>
    <van-popup v-model="useShow" round>
      <popup-used :cardlist="gameinfo.cardlist" :index="used" @used-close="usedClose"/>
    </van-popup>
    <van-popup v-model="reviewShow" round>
      <popup-comment @review-click="reviewClick"/>
    </van-popup>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue';
import DetailCoupon from './childComps/DetailCoupon.vue';
import DetailDiscount from './childComps/DetailDiscount.vue';
import DetailHeader from './childComps/DetailHeader.vue';
import DetailTabBar from './childComps/DetailTabBar.vue';
import DetailTabs from './childComps/DetailTabs.vue';
import PopupComment from './popup/PopupComment.vue';
import PopupUsed from './popup/PopupUsed.vue';
export default {
  name: 'Detail',
  data() {
    return {
      useShow: false,
      title: '',
      gameinfo: {},
      used: null,
      commentlist: [],
      reviewShow: false,
      gameSignType: '',
    }
  },
  components: {
    NavBar,
    DetailHeader,
    DetailCoupon,
    DetailDiscount,
    DetailTabs,
    PopupUsed,
    PopupComment,
    DetailTabBar,
  },
  created () {
    this.getDetailInfo();
  },
  methods: {
    getDetailInfo() {
      this.axios.get('/gameinfo_gameid_5546.json', {}).then(res => {
        this.title = res.data.gameinfo.gamename
        this.gameinfo = res.data.gameinfo
        this.commentlist = res.data.comment_list
        this.gameSignType = res.data.game_sign_type
      })
    },
    // 点击礼包使用说明
    usedClick(index) {
      this.used = index
      this.useShow = true
      console.log(index)
    },
    //关闭使用说明弹框
    usedClose() {
      this.useShow = false
    },
    //打开点评活动弹框
    reviewActivities() {
      this.reviewShow = true
    },
    //关闭点评活动弹框
    reviewClick() {
      this.reviewShow = false
    }
  },
}
</script>

<style lang="less" scoped>
.nav_bar {
  border-bottom: .013333rem solid #f4f4f4;
}
</style>